<template>
	<view class="grabsheet">
		<view class="list">
			<view class="listtext" v-for='(item,index) in list' :key='index'>
				<text class="text" :class="{active:index==inActive}" @click="selection(index,item.number)">{{item.number}}</text>
			</view>
		</view>
		<view class="balance">
			<view>UFT余额：<text style="color:#03AD8F;">{{balance.uft_balance*1+balance.uft_freeze*1}}</text></view>
			<view>USDT余额：<text style="color:#03AD8F;">{{balance.usdt_balance}}</text></view>
		</view>
		<view class="info">抢单规则：限额抢单，限额为500的倍数抢单，最大可抢5000</view>
		<view class="btn">
			<button type="primary" @click="grabsheet">申请抢单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						'number': 500
					},
					{
						'number': 1000
					},
					{
						'number': 1500
					},
					{
						'number': 2000
					},
					{
						'number': 2500
					},
					{
						'number': 3000
					},
					{
						'number': 3500
					},
					{
						'number': 4000
					},
					{
						'number': 4500
					},
					{
						'number': 5000
					}
				],
				inActive: '0',
				quota: 500,
				balance: []
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			selection(index, number) {
				this.inActive = index;
				this.quota = number;
			},
			getData: function() {
				const _this = this;
				this.$request.post("/api/wallet/getUserBalance", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.balance = res.data.data;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			grabsheet: function() {
				const data = {
					money: this.quota
				};
				this.$request.post("/api/index/applyOrder", {
						data: data,
					})
					.then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
						});
						if (res.data.code == 1) {
							uni.navigateTo({
								url: '../appointment/appointment',
							});
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			}
		}
	}
</script>

<style lang="less">
	.grabsheet {
		width: 100%;
		display: flex;
		flex-direction: column;

		.list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
			border-top: 5px solid #F1F1F1;

			.listtext {
				width: 25%;
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					background-color: #1D7BFF;
					width: 70%;
					padding: 10upx 0;
					text-align: center;
					color: #fff;
					font-size: 12px;
					border-radius: 10upx;
				}

				.active {
					background-color: #03AD8F;
				}
			}
		}

		.balance {
			display: flex;
			align-content: center;
			justify-content: space-between;
			font-size: 12px;
			padding: 20px 10px;
			border-bottom: 10px solid #F1F1F1;
		}

		.info {
			color: #D14B64;
			font-size: 12px;
			padding: 10px;
			flex: 1;
		}

		.btn {
			height: 100px;
			width: 70%;
			margin: 0 auto;
		}
	}
</style>
